<template>
  <el-main class="main">
    <el-row style="height: 50px;">
      <el-col :span="2">
        <el-button type="primary" size="default" @click="isStartProcess = true"> <el-icon style="margin-right: 8px;">
            <Plus />
          </el-icon>发起审批</el-button>
      </el-col>
    </el-row>
    <el-table class="table" :data="myprocessList" fit>
      <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
      <el-table-column align="center" prop="formflowName" label="流程名称"></el-table-column>
      <!-- <el-table-column align="center" label="版本号" width="80">
        <template #default="{ row }">
          <el-tag type="primary">V{{ row.procDefVersion }}</el-tag>
        </template>
</el-table-column> -->
      <el-table-column align="center" label="归属系统">
        <template #default="{ row }">
          {{ APP_LIST.find((item) => item.code === row.category)?.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="流程状态" width="200">
        <template #default="{ row }">
          <el-tag :type="row.finishTime === null ? 'primary' : 'success'">{{ row.finishTime === null ? row.taskName :
            '已完成'
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="assigneeName" label="办理人">
        <template #default="{ row }">
          {{ row.assigneeName }}
          <el-tag v-if="row.assigneeName" type="primary">{{ row.assigneeDeptName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="发起时间"></el-table-column>
      <el-table-column align="center" prop="finishTime" label="结束时间"></el-table-column>
      <el-table-column align="center" prop="duration" label="耗时"></el-table-column>
      <!-- <el-table-column align="center" prop="taskName" label="当前节点"></el-table-column> -->

      <el-table-column align="center" label="操作" width="240">
        <template #default="{ row }">
          <el-button v-if="row.finishTime === null" type="warning" size="small" link @click="stop(row)">取消申请</el-button>
          <!-- <el-button type="danger" plain size="small" @click="remove(row)">删除</el-button> -->
          <el-button v-if="row.finishTime !== null" type="danger" size="small" link @click="remove(row)">删除</el-button>
          <el-button type="primary" plain size="small" link @click="show(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
        layout="sizes,prev, pager, next, jumper" :total="pageInfo.total" :page-sizes="[10, 30, 50]"
        @change="changePage">
      </el-pagination>
    </div>
    <el-drawer title="流程信息" v-model="isProcessInstance" size="80%">
      <ProcessDetailPage :processStartFormData="processStartFormData" :flowData="flowData"
        :processInstance="processInstance">
      </ProcessDetailPage>
    </el-drawer>
    <el-drawer class="drawer" title="发起审批" v-model="isStartProcess" direction="rtl" size="90%"
      :close-on-press-escape="false">
      <StartProcess v-model:isStartProcess="isStartProcess"></StartProcess>
    </el-drawer>
  </el-main>
</template>

<script setup>
import { ref } from 'vue'
import { getMyProcess, stopProcIns, removeProcIns } from '@/api/flowable/task'
import { APP_LIST } from '@/constants/appname.js'
import ProcessDetailPage from '../components/ProcessDetailPage.vue';
import StartProcess from './StartProcess.vue';
const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0,
})
const myprocessList = ref([])
const isStartProcess = ref(false)
async function doGetMyProcess() {
  await getMyProcess(pageInfo.value).then(res => {
    console.log(res)
    myprocessList.value = res.data.data.records
    pageInfo.value.total = res.data.data.total
  })
}
doGetMyProcess()
import { getrecords } from '@/api/flowable/task'
import { getInstanceVariables } from '@/api/flowable/instance'
import { getProcessXmlAndNode } from '@/api/flowable/defination'
import { ElMessage } from 'element-plus';
const isProcessInstance = ref(false)
const processInstance = ref([])
const processStartFormData = ref({})
const flowData = ref('')
async function show(row) {
  processInstance.value = []
  processStartFormData.value = {}
  flowData.value = ''
  console.log(row)
  isProcessInstance.value = true
  await getrecords(row.procInsId).then(res => {
    console.log('processIntance', res)
    processInstance.value = res.data.data
  })
  await getInstanceVariables(row.procInsId).then(res => {
    console.log('variables', res)
    processStartFormData.value = res.data.data
  })
  await getProcessXmlAndNode(row.deployId, row.procInsId).then(res => {
    console.log('xmlAndNode:', res.data.data)
    flowData.value = res.data.data
  })
}
async function stop(row) {
  await stopProcIns(row.procInsId).then(res => {
    console.log('stop', res)
    ElMessage.success(res.data.data)
    doGetMyProcess()
  })
}
async function remove(row) {
  await removeProcIns(row.procInsId).then(res => {
    console.log('remove', res)
    ElMessage.success(res.data.data)
    doGetMyProcess()
  })

}
</script>

<style lang="less" scoped>
.main {
  .el-button {
    border-radius: 0;
  }

  .table {
    .el-button {
      width: 80px;
    }
  }

}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  /* 居右对齐 */
}
</style>